<template>
  <Button
    v-if="type === 'text-primary'"
    class="custom-button custom-button-textPrimary"
    :loading="loading"
    :icon="icon"
    :size="size"
    :disabled="disabled"
    @click="buttonClick">
    <slot />
  </Button>
  <Button
    v-else-if="isLineGrad"
    class="custom-button custom-button-lineGrad"
    :type="type"
    :loading="loading"
    :icon="icon"
    :size="size"
    :disabled="disabled"
    @click="buttonClick">
    <slot />
  </Button>
  <Button
    v-else
    class="custom-button"
    :type="type"
    :loading="loading"
    :icon="icon"
    :size="size"
    :disabled="disabled"
    @click="buttonClick">
    <slot />
  </Button>
</template>

<script>
export default {
  emits: ['click'],
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    loading: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    size: {},
    disabled: {
      type: Boolean,
      default: false
    },
    isLineGrad: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    buttonClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import 'common/scss/color';

  .custom-button {
    // min-width: 70px;
    border-radius: 2px;
    &.custom-button-textPrimary {
      border-color: $Color-primary;
      color: $Color-primary;
    }
    &.ivu-btn-primary {
      background-color: $Color-primary;
      border-color: $Color-primary;
      &.custom-button-lineGrad {
        background-color: #309BF2;
        background: -webkit-linear-gradient(left, #76C2FF, #309BF2);
        border: none;
        font-weight: bold;
      }
    }
    &.ivu-btn-success {
      background-color: $Color-success;
      border-color: $Color-success;
      &.custom-button-lineGrad {
        background-color: #0CB48C;
        background: -webkit-linear-gradient(left, #4ECFB9, #0CB48C);
        border: none;
        font-weight: bold;
      }
    }
    &.ivu-btn-error {
      background-color: $Color-danger;
      border-color: $Color-danger;
      &.custom-button-lineGrad {
        background-color: #F23055;
        background: -webkit-linear-gradient(left, #FF7681, #F23055);
        border: none;
        font-weight: bold;
      }
    }
    &[disabled] {
      color: #c5c8ce;
      background-color: #f7f7f7;
      border-color: #dcdee2;
    }
  }
</style>
